<!--
*@Author: QWP
*@Description: 用户，群列表的右键菜单
*@Date: 2025-01-08 16:38:47
-->
<template>
  <a-popover v-bind="$attrs"
    trigger="contextmenu"
    placement="bottomRight">
    <template #content>
      <div class="u-right-menu-box">
        <div v-for="item in menus1"
          class="u-menu-item f-flex-row"
          @click="emits('click', item.value, item)">
          <u-icon-font :type="item.icon" 
            class="f-padding-r6 u-menu-icon">
          </u-icon-font>
          {{ item.label }}
        </div>
      </div>
    </template>
    <slot></slot>
  </a-popover>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, watch, watchEffect } from 'vue' 
const props = defineProps<{
  menus?: any[],
  data?: object,
}>()

const emits = defineEmits(['click'])

const menus1 = ref<any[]>([]);

watchEffect(() => {
  menus1.value = props.menus ? props.menus : [
    {label: props.data['status'] == 0 ? '置顶' : '取消置顶', value: 'top', icon: 'icon-zhiding'},
  ]
})

</script>

<style lang='scss' scoped>
.u-right-menu-box {
  .u-menu-item {
    padding: 4px 14px;
    letter-spacing: 1px;
    &:hover {
      background-color: #eee
    }
    .u-menu-icon {
      padding-right: 6px;
      font-size: 16px
    }
  }
}
</style>